import type { FormInstance } from 'element-plus'
import type {
  AssetHomeStateType,
  AssetHomePatternDataType /* AssetHomeAreaType */
} from './typings'
import type { AssetHomeMarkerData } from '../../assetManagement/components/map/typings'
// import type { PopoverInfoDataType } from '../components/assetHomeComponents/typings'
import { defineComponent, ref, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import { keys } from 'lodash'
import {
  ElCard,
  ElRow,
  ElCol,
  ElLink,
  ElForm,
  ElFormItem,
  ElInput,
  ElSelect,
  ElOption,
  ElScrollbar,
  ElSpace,
  ElDivider,
  ElImage,
  ElIcon,
  ElTooltip,
  ElMessage
  // ElSelect,
  // ElOption
} from 'element-plus'
import { ArrowDownBold, ArrowUpBold, Plus, Minus } from '@element-plus/icons-vue'
import SaasTitle from '~/components/SaasTitle'
import AliIcon from '~/components/AliIocn'
import AssetHomeMap from './AssetHomeMap'
// import AreaInfoPopover from '../components/assetHomeComponents/AreaInfoPopover'
// import PowerDistributionFacilitiesPopover from '../../assetManagement/components/assetHomeComponents/PowerDistributionFacilitiesPopover'
// import LightPolePopover from '../../assetManagement/components/assetHomeComponents/LightPolePopover'
// import LampPopover from '../../assetManagement/components/assetHomeComponents/LampPopover'
import BaseStation from '../../assetManagement/components/assetHomeComponents/BaseStation'
// import FacilityLoopsInfoPopover from '../../assetManagement/components/assetHomeComponents/FacilityLoopsInfoPopover'
import SetLamppostScope from './SetLamppostScope'
// import { handleTrim } from '~/utils/util'
import { EL_SPACE_SIZE_SECOND_GEAR } from '~/utils/const'
import styles from './../index.module.scss'
import useVuexGetters from '~/hooks/useVuexGetters'
import type { shareEnum } from '~/store/base/typings'
import ConstructionOptions from '../construction/option'

export default defineComponent(function BasestationHome() {
  const store = useStore()
  const assetHomeMapRef = ref()
  const ruleFormRef = ref<FormInstance>()
  const state = reactive<AssetHomeStateType>({
    expand: false,
    activeAreaIds: [],
    areaList: [],
    graphicExampleExpand: false,
    // areaInfoVisible: false
    activeOptionsBarCode: [],
    position: '',
    isSurvey: null,
    mapInputValue: 1,
    placeholder: '请输入需求批次',
    batchNum: '',
    setLamppostScopeShow: false,
    satelliteChangingOverShow: false,
    inputShow: false,
    constructionOptionsVisible: false,
    assetId: ''
  })

  const baseState = useVuexGetters('base', ['surveyStatusOpt'])

  // 查询租户专题图(按钮操作栏)
  const handleGetOptionsBar = async () => {
    const res = await store.dispatch('base/GetAssetHomeOptionsBar')
    state.optionsBar = res?.data || []
    if (state?.optionsBar?.length)
      state.moduleId = state.optionsBar
        ?.filter((item) => item?.code !== 'DistributionLoop')
        ?.find((item) => item?.code === 'Distribution')?.id
    // 初始化的时候给予默认选中效果
    state.activeOptionsBar = state.optionsBar?.map((item) => item?.id)
    state.activeOptionsBarCode = state.optionsBar?.map((item) => item?.code)
  }

  // 获取当前页面初始化所需要的地图数据
  const handleGetInitMapData = async () => {
    const res = await store.dispatch('base/GetAssetHomeMapSpecialTenant')
    state.patternData = res?.data?.specialDetailVOS?.reduce(
      (patternData: AssetHomeStateType['patternData'], item: AssetHomePatternDataType) => {
        if (item.assetModuleId) patternData![item.assetModuleId] = item
        return patternData
      },
      {}
    )
    state.cityName = res?.data?.city
    if (res?.data) {
      // 设置地图属性
      assetHomeMapRef.value.setMapInfo(res?.data)
    } else {
      handleGetMapZoom()
    }
    await assetHomeMapRef.value.searchMapMarker()

    // 生成所需要的坐标点icon
    assetHomeMapRef.value?.generateMarkerIcon?.(state.optionsBar)
  }

  // 修改图例card是否展开
  const handleChangeGraphicExampleExpand = () => {
    state.graphicExampleExpand = !state.graphicExampleExpand
  }

  // 地区查询
  const handleDistribution = (e: Event | KeyboardEvent) => {
    if ((e as KeyboardEvent).key !== 'Enter') return
    handleSearchDistribution()
  }
  const handleSearchDistribution = () => {
    if (state.position || state.positionName) {
      assetHomeMapRef.value.handleSearchDistribution(state.position, state.positionName)
    }
  }

  // 配电名称查询
  const handleSearchPowerDistributionFacilitie = (e: Event | KeyboardEvent) => {
    if ((e as KeyboardEvent).key !== 'Enter') return
    const isSurvey = state.isSurvey?.join(',')
    if (state.mapInputValue === 1) {
      assetHomeMapRef.value.markerClusterAjax({
        batchNum: state.batchNum,
        isSurvey
      })
    } else {
      assetHomeMapRef.value.markerClusterAjax({ keyword: state.batchNum, isSurvey })
    }
  }
  const onClearHandleSearchEquipmentInformation = () => {
    assetHomeMapRef.value.markerClusterAjax({ batchNum: '', keyword: '' })
  }
  //  地图搜索
  const mapInputValueChange = (value: number) => {
    value === 1
      ? (state.placeholder = '需求批次 回车批量搜索')
      : (state.placeholder = '站点名称/灯杆名称/匹配站名 回车批量搜索')
    state.batchNum = ''
  }
  //  查勘状态
  const isSurveySearchTable = () => {
    const isSurvey = state.isSurvey?.join(',')
    if (state.mapInputValue === 1) {
      assetHomeMapRef.value.markerClusterAjax({ batchNum: state.batchNum, isSurvey })
    } else {
      assetHomeMapRef.value.markerClusterAjax({ keyword: state.batchNum, isSurvey })
    }
  }
  // 查询根据名称和moduleId查询对应的设备
  // const handleSearchEquipmentInformation = (value: number | undefined) => {
  //   if (value === 1) {
  //     if (!handleTrim(state.distributionName!)) {
  //       assetHomeMapRef.value.clearEquipmentPoint()
  //       return
  //     }

  //     if (state.distributionName!?.length < 2) {
  //       ElMessage.error('关键字输入太少，无法匹配到有效数据')
  //       return
  //     }
  //   }
  //   ruleFormRef.value!.validateField(['distributionName'], async (isValid) => {
  //     if (!isValid) return
  //     const res = await store.dispatch(
  //       'assetHome/GetAssetHomePowerSearchAssetBaseStationStationGisApi',
  //       {
  //         moduleId: state.moduleId,
  //         keyword: handleTrim(state.distributionName!),
  //         isSurvey: state.isSurvey
  //       }
  //     )
  //     // 如果查到数据则将目前地图的中心点定位到默认的第一个配电设施坐标位置
  //     if (res?.data?.length) {
  //       const firstDataParse = res?.data[0]?.phase
  //       if (firstDataParse.coordinates?.length) {
  //         const zoom = assetHomeMapRef.value.map.getZoom()
  //         if (zoom < 14) {
  //           assetHomeMapRef.value.map.setZoom(14)
  //         }
  //         assetHomeMapRef.value.map.setCenter(firstDataParse.coordinates, false, 0)
  //       }
  //       // assetHomeMapRef.value.drawEquipmentPoint(res?.data)
  //     } else {
  //       ElMessage.warning('未匹配到数据')
  //       assetHomeMapRef.value.drawEquipmentPoint([])
  //     }
  //   })
  // }

  // 地址查询
  // const handleSearchAddressForMap = (value: string) => {
  //   const placeSearch = new assetHomeMapRef.value.aMap.PlaceSearch({
  //     city: state.cityName,
  //     citylimit: false
  //   }) // 构造地点查询类
  //   placeSearch.search(value, (status: string, result: Record<string, any>) => {
  //     state.addressList =
  //       status === 'complete' && result.info === 'OK'
  //         ? uniqWith(
  //           result.poiList.pois,
  //           (item: { name: string }, nextItem: { name: string }) => item.name === nextItem.name
  //         )
  //         : []
  //   })
  // }

  // 根据选中的地址
  // const handleChangeActiveAddress = (value: string) => {
  //   if (!value) {
  //     state?.seachAddressMarker?.hide()
  //     return
  //   }
  //   const findItem = state.addressList!.find((item) => item.name === value)
  //   if (findItem?.location) {
  //     assetHomeMapRef.value.map.setCenter([findItem.location.lng, findItem.location.lat], false, 0)
  //     assetHomeMapRef.value.searchMapMarker()

  //     // 设置搜索点
  //     if (state?.seachAddressMarker) {
  //       state?.seachAddressMarker.setPosition([findItem.location.lng, findItem.location.lat])
  //       state?.seachAddressMarker.show()
  //     } else {
  //       state.seachAddressMarker = new assetHomeMapRef.value.aMap.Marker({
  //         title: findItem?.name,
  //         map: assetHomeMapRef.value.map,
  //         icon: assetHomeMapRef.value.amapIcon,
  //         position: [findItem.location.lng, findItem.location.lat],
  //         offset: [-12, -22]
  //       })
  //     }
  //   }
  // }

  // 切换选中的操作栏项
  const handleChangeActiveOptionsBar = (row: any) => {
    if (state.activeOptionsBarCode?.includes(row.code)) {
      state.activeOptionsBarCode = state.activeOptionsBarCode.filter((item) => item !== row.code)
    } else {
      state.activeOptionsBarCode?.push(row.code)
    }
    if (state.activeOptionsBar?.includes(row.id)) {
      state.activeOptionsBar = state.activeOptionsBar.filter((item) => item !== row.id)
    } else {
      state.activeOptionsBar?.push(row.id)
    }
    // 每次变更完选中的操作栏项会去再查一遍页面需要展示的点和线
    const timer = setTimeout(() => {
      assetHomeMapRef.value.searchMapMarker()
      // 清理定时器  增加定时器原因是因为值的更新速度没有查询快
      clearTimeout(timer)
    }, 0)
  }

  // 切换区域详情弹框展示
  // const handleChangeAreaInfoView = (
  //   left: number,
  //   top: number,
  //   areaInfo: AssetHomeAreaType,
  //   popoverInfo: PopoverInfoDataType
  // ) => {
  //   // 如果已有则清空数据取消展示
  //   if (state.areaInfoVisible && popoverInfo === undefined) {
  //     state.areaInfoVisible = false
  //     state.areaInfo = undefined
  //     return
  //   }
  //   // 如果没有则展示数据
  //   state.areaInfoVisible = true
  //   state.areaInfo = {
  //     left,
  //     top,
  //     areaInfo,
  //     popoverInfo
  //   }
  // }

  // 切换区域详情弹框位置
  // const handleChangeAreaInfoPosition = (left: number, top: number) => {
  //   if (!state.areaInfo) return
  //   state.areaInfo!.left = left
  //   state.areaInfo!.top = top
  // }

  // 关闭区域信息弹框
  // const handleCancelAreaInfoPopover = () => {
  //   assetHomeMapRef.value.clearActiveMarkerEvent()
  // }

  // 切换配电设施 监控箱 灯 灯杆详情展示
  const handleChangePatternMarkerInfoView = (
    left: number,
    top: number,
    type: AssetHomeStateType['patternMarkerType'],
    info: AssetHomeStateType['patternMarkerInfo'],
    pointList: AssetHomeMarkerData[]
  ) => {
    state.patternMarkerType = type
    state.patternMarkerInfo = info
      ? {
          popoverInfo: info,
          left,
          top,
          pointList
        }
      : undefined
  }

  // 更新配电设施 灯 灯杆 弹框位置
  const handleChangePatternMarkerInfoPosition = (left: number, top: number) => {
    if (!state.patternMarkerInfo) return
    state.patternMarkerInfo!.left = left
    state.patternMarkerInfo!.top = top
  }

  // 切换回路详情弹框
  const handleChangePatterPolylineInfoView = (
    left: number,
    top: number,
    name: string,
    loopList: AssetHomeStateType['patternMarkerInfo'],
    activeLoopIds: string[]
  ) => {
    state.patternMarkerType = name ? 'loop' : undefined
    state.patternMarkerInfo = loopList
      ? {
          left,
          top,
          name,
          loopList,
          activeLoopIds
        }
      : undefined
  }

  // 关闭配电设施 灯 灯杆弹框
  const handleCancelPatternMarkerPopover = () => {
    state.patternMarkerType = undefined
    state.patternMarkerInfo = undefined
    assetHomeMapRef.value.clearActiveMarkerEvent()
  }

  // 切换位于同一个坐标的灯灯杆等选中项
  const handleChangeActivePatternMarkerInfo = async (
    record: AssetHomeStateType['patternMarkerInfo']
  ) => {
    if (record?.id !== state.patternMarkerInfo?.info?.id)
      assetHomeMapRef.value.changeActivePatternMarker(record)
    const res = await assetHomeMapRef.value.getPatterMarkerInfo(record)
    state.patternMarkerType = res.markerType
    state.patternMarkerInfo!.popoverInfo = res.data
  }

  // 获取当前地图层级并赋值
  const handleGetMapZoom = () => {
    state.mapZoom = Math.round(assetHomeMapRef.value.map.getZoom())
  }

  // 切换当前地图层级
  const handleClickChangeMapZoom = async (type: '+' | '-') => {
    let zooms = Math.round(assetHomeMapRef.value.map.getZoom())
    if (type === '+') {
      zooms++
    } else {
      zooms--
    }
    await assetHomeMapRef.value.map.setZoom(zooms)
  }

  // 设置灯杆范围
  const onSetLamppostScope = () => {
    state.setLamppostScopeShow = !state.setLamppostScopeShow
    handleCancelPatternMarkerPopover()
  }
  //  设置灯杆范围
  const onSetHandleChange = async (scope: string) => {
    const res = await store.dispatch('base/SetLampPostScope', { scope })
    if (res.code === 200) {
      ElMessage({ type: 'success', message: res.msg })
      assetHomeMapRef.value.drawCircleCrea()
      onAmbitusLamp()
    }
  }
  //  获取点击详情
  const phase = reactive({ lat: 0, lon: 0 })
  const onGetMarkerInfo = (value: AssetHomeMarkerData) => {
    phase.lat = value.phase.coordinates[1]
    phase.lon = value.phase.coordinates[0]
  }
  //  周边灯杆 圆
  const onAmbitusLamp = async () => {
    handleCancelPatternMarkerPopover()
    const res = await store.dispatch('base/GetLampPostByscope', {
      lat: phase.lat,
      lon: phase.lon
    })
    if (res.code === 200) {
      assetHomeMapRef.value.appendixLamppostDraw(res?.data)
    }
    const res1 = await store.dispatch('base/GetLampPostScope')
    if (res1.code === 200) {
      await assetHomeMapRef.value.drawCircle(res1?.data, [phase.lon, phase.lat])
    }
  }
  //  卫星地图展示切换
  const satelliteChangingOver = () => {
    state.satelliteChangingOverShow = !state.satelliteChangingOverShow
    assetHomeMapRef.value.satelliteChangingOver(state.satelliteChangingOverShow)
  }
  //   批次搜索切换
  const rowsNum = ref(1)
  const onBatchNumFocus = () => {
    rowsNum.value = 4
  }
  const onBatchNumBlur = () => {
    rowsNum.value = 1
  }
  //  查看详情
  const onConstructionInfo = (value: any) => {
    handleCancelPatternMarkerPopover()
    state.assetId = value.assetId
    state.constructionOptionsVisible = true
  }

  onMounted(() => {
    handleGetOptionsBar()
    // 获取投运状态下拉列表
    store.dispatch('powerDistributionFacilities/GetOperationStatusSelectList')
    // 获取设备类别下拉列表
    store.dispatch('powerDistributionFacilities/GetDistributiontTypeSelectList')
    // 获取所属区域下拉列表
    store.dispatch('assetWorkArea/GetWorkAreaSelectListByUser')
    // 灯杆类型 下拉列表
    store.dispatch('assetLampPost/GetNodeByParentCode')
    // 灯具类型 下拉列表
    store.dispatch('assetLampBase/GetNodeByParentCode')
    // handleGetInitMapData()
    //  查勘状态
    store.dispatch('base/SurveyStatusGet', { code: 'asset_station_survey' })
  })

  return () => {
    //  详情
    if (state.constructionOptionsVisible) {
      return (
        <ConstructionOptions
          record={{ id: state.assetId }}
          type="read"
          cancel={() => {
            state.constructionOptionsVisible = false
          }}
        />
      )
    }
    return (
      <section class={styles['asset-home-box']}>
        <AssetHomeMap
          ref={assetHomeMapRef}
          id={styles['asset-home-map']}
          initCallback={handleGetInitMapData}
          patternData={state.patternData}
          activeModules={state.activeOptionsBar}
          // areaInfoVisible={state.areaInfoVisible}
          patternMarkerType={state.patternMarkerType}
          getMapZoom={handleGetMapZoom}
          // onChangeAreaInfoView={handleChangeAreaInfoView}
          // onChangeAreaInfoPosition={handleChangeAreaInfoPosition}
          onChangePatterMarkerInfoView={handleChangePatternMarkerInfoView}
          onChangePatterMarkerInfoPosition={handleChangePatternMarkerInfoPosition}
          onChangePatterPolylineInfoView={handleChangePatterPolylineInfoView}
          activeOptionsBar={state.activeOptionsBarCode}
          onGetMarkerInfo={onGetMarkerInfo}
        />
        {/* 搜索栏 */}
        <section
          class={{
            [styles['asset-home-area-search-bar']]: true,
            [styles['asset-home-area-search-bar-collapse']]: !state.expand
          }}
        >
          <ElForm
            class={styles['asset-home-area-search-bar-form']}
            ref={ruleFormRef}
            model={{ distributionName: state.distributionName, address: state.address }}
          >
            <ElFormItem class={styles['asset-home-area-search-bar-form-item']} prop="positionName">
              <ElInput
                v-model={state.positionName}
                clearable
                placeholder="请输入地区"
                prefixIcon={<AliIcon type="icon-sousuo" />}
                onKeydown={handleDistribution}
                onClear={handleSearchDistribution}
              />
            </ElFormItem>
            <ElFormItem
              class={styles['asset-home-area-search-bar-form-item']}
              prop="distributionName"
              style="width: 360px;"
            >
              <ElRow>
                <ElCol span={8}>
                  <ElSelect
                    v-model={state.mapInputValue}
                    onChange={mapInputValueChange}
                    style="width: 120px;"
                  >
                    <ElOption label="需求批次" value={1}></ElOption>
                    <ElOption label="关键字" value={2}></ElOption>
                  </ElSelect>
                </ElCol>
                <ElCol span={16}>
                  <ElInput
                    v-model={state.batchNum}
                    {...{ rows: rowsNum.value }}
                    placeholder={state.placeholder}
                    onKeydown={handleSearchPowerDistributionFacilitie}
                    onClear={onClearHandleSearchEquipmentInformation}
                    onFocus={onBatchNumFocus}
                    onBlur={onBatchNumBlur}
                    type="textarea"
                    style="position: absolute; top: 2px; left: 120px; z-index: 9999;width: 240px;"
                  />
                </ElCol>
              </ElRow>
            </ElFormItem>
            <ElFormItem class={styles['asset-home-area-search-bar-form-item']} prop="isSurvey">
              <ElSelect
                v-model={state.isSurvey}
                clearable
                multiple
                onChange={isSurveySearchTable}
                placeholder="查勘状态"
              >
                {baseState.surveyStatusOpt?.value?.map((item: shareEnum) => (
                  <ElOption key={item?.dictKey} label={item?.dictValue} value={item?.dictKey} />
                ))}
              </ElSelect>
            </ElFormItem>
          </ElForm>
        </section>
        {/* 按钮操作栏 */}
        {!!state.optionsBar?.length && (
          <ElCard
            class={{
              [styles['asset-home-area-options-bar']]: true,
              [styles['asset-home-area-options-bar-collapse']]: !state.expand
            }}
          >
            <ElSpace spacer={<ElDivider direction="vertical" />}>
              {state.optionsBar?.map((item) => (
                <ElLink
                  style={{ display: 'block' }}
                  underline={false}
                  onClick={() => handleChangeActiveOptionsBar(item)}
                >
                  <ElTooltip effect="light" placement="top" content={item?.name}>
                    <ElImage
                      class={styles['asset-home-area-options-bar-icon']}
                      src={
                        state.activeOptionsBarCode?.includes(item.code)
                          ? item.iconUrl
                          : item.greyIconUrl
                      }
                    />
                  </ElTooltip>
                </ElLink>
              ))}
            </ElSpace>
          </ElCard>
        )}
        {/* 控制放大缩小 */}
        <ElSpace
          direction="vertical"
          class={{
            [styles['asset-home-zoom']]: true,
            [styles['asset-home-zoom-expand']]: state.graphicExampleExpand
          }}
        >
          <ElCard class="zoom-number-card">{state.mapZoom}</ElCard>
          <ElCard class="zoom-option-card">
            <ElSpace direction="vertical" spacer={<ElDivider />}>
              <ElLink underline={false} icon={Plus} onClick={() => handleClickChangeMapZoom('+')} />
              <ElLink
                underline={false}
                icon={Minus}
                onClick={() => handleClickChangeMapZoom('-')}
              />
            </ElSpace>
          </ElCard>
        </ElSpace>
        {/* 卫星地图切换 */}
        <div
          class={{
            [styles['distribution-satellite-changing-over']]: true,
            [styles['satellite-changing-over-actions']]: state.satelliteChangingOverShow
          }}
          onClick={satelliteChangingOver}
        >
          <AliIcon type="icon-a-weixinghangtiantianwen1" />
          &nbsp;卫星
        </div>
        {/* 图例展示栏 */}
        <ElCard
          class={{
            [styles['asset-home-graphic-example']]: true,
            [styles['asset-home-graphic-example-packUp']]: !state.graphicExampleExpand
          }}
          v-slots={{
            header: () => (
              <ElRow>
                <ElCol span={12}>
                  <SaasTitle type="primary">图例</SaasTitle>
                </ElCol>
                <ElCol span={12} {...{ align: 'right' }}>
                  <ElLink underline={false} onClick={handleChangeGraphicExampleExpand}>
                    <ElIcon>
                      {state.graphicExampleExpand ? <ArrowDownBold /> : <ArrowUpBold />}
                    </ElIcon>
                  </ElLink>
                </ElCol>
              </ElRow>
            )
          }}
        >
          <ElScrollbar height={327}>
            <ElSpace direction="vertical" fill size={EL_SPACE_SIZE_SECOND_GEAR}>
              {keys(state.patternData || {})
                ?.map((key: string) =>
                  state.patternData?.[key]?.modelConfigDataVO?.base?.legend
                    ? state.patternData?.[key]?.modelConfigDataVO?.renderer?.categoryList?.map(
                        (item) => (
                          <ElTooltip
                            content={`${state.patternData![key].assetModuleName}（${item.value}）`}
                          >
                            <ElSpace>
                              {/* 区域渲染 */}
                              {state.patternData?.[key]?.assetModuleCode === 'WorkArea' && (
                                <AliIcon
                                  class={styles['asset-home-graphic-example-icon']}
                                  type="icon-gongqu"
                                  color={item.color}
                                />
                              )}
                              {/* 回路渲染 */}
                              {state.patternData?.[key]?.assetModuleCode === 'DistributionLoop' && (
                                <AliIcon
                                  class={styles['asset-home-graphic-example-icon']}
                                  type="icon-huilu"
                                  color={item.color}
                                />
                              )}
                              {/* 非区域和非回路渲染 */}
                              {state.patternData?.[key]?.assetModuleCode !== 'WorkArea' &&
                                state.patternData?.[key]?.assetModuleCode !==
                                  'DistributionLoop' && (
                                  <ElImage
                                    class={styles['asset-home-graphic-example-icon']}
                                    src={item.iconImage}
                                  />
                                )}
                              <section class="text-one-line-overflow">
                                {state.patternData![key].assetModuleName}（{item.value}）
                              </section>
                            </ElSpace>
                          </ElTooltip>
                        )
                      )
                    : []
                )
                .flat()}
            </ElSpace>
          </ElScrollbar>
        </ElCard>
        {/* 区域信息弹框 */}
        {/* {state.areaInfoVisible && (
        <AreaInfoPopover {...(state.areaInfo || {})} onCancel={handleCancelAreaInfoPopover} />
      )} */}
        {/* 基站信息弹框 */}
        {state.patternMarkerType === 'BaseStation' && (
          <BaseStation
            {...(state.patternMarkerInfo || {})}
            onCancel={handleCancelPatternMarkerPopover}
            changeActivePatternMarker={handleChangeActivePatternMarkerInfo}
            onSetLamppostScope={onSetLamppostScope}
            onAmbitusLamp={onAmbitusLamp}
            onConstructionInfo={onConstructionInfo}
          />
        )}
        {/* 范围设置 */}
        {state.setLamppostScopeShow && (
          <SetLamppostScope
            visible={state.setLamppostScopeShow}
            onClose={onSetLamppostScope}
            onHandleChange={onSetHandleChange}
          />
        )}
      </section>
    )
  }
})
